<template>
  <Modal v-model="showModal" :title="title" :closable="false" @on-visible-change="statusChange">
    <div class slot="close">
      <i class="ivu-icon ivu-icon-ios-close-empty" @click="close"></i>
    </div>
    <div style>
      <template v-if="type == 1 || type == 2">
        <Input autofocus v-model="value" :placeholder="placeholder" type="text"></Input>
        <span style="color:red" v-if="show_info">不能为空</span>
      </template>
      <template v-else-if="type ==3 || type == 4">
        <scroll ref="scrollBar" style="overflow:scroll;height:200px">
          <Tree @on-check-change="setTreeNode" multiple show-checkbox :data="tree_data"></Tree>
        </scroll>
      </template>
    </div>
    <div slot="footer">
      <Button type="primary" @click="save">保存</Button>
      <Button type="error" @click="close">取消</Button>
    </div>
  </Modal>
</template>
<script>
export default ({
  name: 'modalDialog',
  props: {
    modal_type: {
      default: '0'
    },
    placeholder: {
      type: String,
      default: '输入'
    },
    title: {
      type: String,
      default: '新增'
    },
    treeData: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  computed: {
    type: { // 需要显示的弹框类型
      get: function () {
        return this.modal_type || 0
      },
      set: function () { }
    },
    showModal: { // 是否显示弹框
      get: function () {
        return [1, 2, 3, 4].indexOf(this.type) !== -1 || false
      },
      set: function () { }
    },
    tree_data: {
      get: function () {
        const data = JSON.parse(JSON.stringify(this.treeData))
        return data
      },
      set: function () { }
    }
  },
  data () {
    return {
      loading: false,
      show_info: false,
      value: '',
      changed: '', // 是否修改tree
      treeNodes: [] // 被选中的树节点
    }
  },
  methods: {
    save () {
      switch (this.type) {
        case 1:
        case 2:
          this.saveInput()
          break
        case 3:
        case 4:
          this.saveTree()
          break
        default:
          break
      }
    },
    saveInput: function () { // 保存input数据， 新增组、角色／修改组、角色名
      if (this.value !== '') {
        this.$emit('save', this.value)
        this.value = ''
        this.show_info = false
      } else {
        this.show_info = true
      }
    },
    saveTree: function () { // 保存用到tree组件的数据
      let nodes = []
      if (!this.changed) {
        this.close()
      } else {
        this.treeNodes.forEach((item) => {
          nodes.push(item.id)
        })
        this.$emit('save', nodes.join(','))
      }
    },
    setTreeNode (nodes) {
      if (!this.changed) this.changed = true
      this.treeNodes = nodes
    },
    close: function (e) { // 恢复默认属性
      this.show_info = false
      this.value = ''
      this.type = 0
      this.showModal = false
      this.tree_data = []
      this.$emit('close')
    },
    statusChange: function (e) {
      if (!e) {
        this.close()
      }
    }
  },
  watch: {
    type (val) {
    }
  }
})
</script>
<style>
</style>
